<template>
  <div class="business">
    <div class="left">
      <dl ref="tranform">
        <dd :class="imgbtnindex == index ? 'active' : ''" v-for="(item, index) in imgbtn" :key="index"
          @click="item.callback(item, index)">
          <img v-if="imgbtnindex == index" :src="item.imghover" alt="" />
          <img v-else :src="item.img" alt="" />
          <span>{{
          $t(item.lang)
        }}</span>
        </dd>

      </dl>
      <ul>
        <li v-for="(item, index) in btn" @click="btnindex = index" :class="btnindex == index ? 'active' : ''">
          {{ $t(item) }}
        </li>
      </ul>
    </div>
    <div class="right">
      <Transition name="slide-right" mode="out-in">
        <component :is="iscomponent" />
      </Transition>

    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, defineAsyncComponent, shallowReactive, shallowRef, markRaw } from "vue";
let Tgprocess = markRaw(defineAsyncComponent(() => import("./business/components/Tgprocess.vue")));
let servico = markRaw(defineAsyncComponent(() => import("./business/components/servico.vue")));
let introduce = markRaw(defineAsyncComponent(() => import("./business/components/introduce.vue")));
let vantagens = markRaw(defineAsyncComponent(() => import("./business/components/vantagens.vue")));
let programa = markRaw(defineAsyncComponent(() => import("./business/components/programa.vue")));
let enter = markRaw(defineAsyncComponent(() => import("./business/components/enter.vue")));
let iscomponent = ref(Tgprocess);
let btnindex = shallowRef<number>(0);
let imgbtnindex = shallowRef<number>(0);
let btn = shallowReactive<string[]>(["language.business.btn1", "language.business.btn2"]);
let imgbtn = reactive<{ lang: string, img: string, imghover: string, component: any, callback: Function }[]>([
  {
    lang: "language.business.tab1",
    img: "/img/bn1.png",
    imghover: "/img/bn1l.png",
    component: Tgprocess,
    callback: (item: any, index: number) => {
      iscomponent.value = item.component;
      imgbtnindex.value = index;
    },
  },
  {
    lang: "language.business.tab2",
    img: "/img/bn2.png",
    imghover: "/img/bn2l.png",
    component: servico,
    callback: (item: any, index: number) => {
      iscomponent.value = item.component;
      imgbtnindex.value = index;
    },
  },
  {
    lang: "language.business.tab3",
    img: "/img/bn3.png",
    imghover: "/img/bn3l.png",
    component: introduce,
    callback: (item: any, index: number) => {
      iscomponent.value = item.component;
      imgbtnindex.value = index;
    },
  },
  {
    lang: "language.business.tab4",
    img: "/img/bn4.png",
    imghover: "/img/bn4l.png",
    component: vantagens,
    callback: (item: any, index: number) => {
      iscomponent.value = item.component;
      imgbtnindex.value = index;
    },
  },
  {
    lang: "language.business.tab5",
    img: "/img/bn5.png",
    imghover: "/img/bn5l.png",
    component: programa,
    callback: (item: any, index: number) => {
      iscomponent.value = item.component;
      imgbtnindex.value = index;
    },
  },
  {
    lang: "language.business.tab6",
    img: "/img/bn6.png",
    imghover: "/img/bn6l.png",
    component: enter,
    callback: (item: any, index: number) => {
      iscomponent.value = item.component;
      imgbtnindex.value = index;
    },
  },
]);
</script>

<style scoped lang="scss">
.business {
  width: 100%;
  height: 700px;
  @include flex(row, space-between, center);

  .left {
    width: 20%;
    height: 100%;
    border-radius: 15px;
    background-image: linear-gradient(#1c1e22, #1c1e22), linear-gradient(#fff, #fff);
    padding: 0 20px;

    dl {
      width: 100%;

      .active {
        span {
          color: #fff;
        }

        background-color: #0a906c;

      }

      dd {
        height: 50px;
        margin-top: 20px;
        @include flex(row, flex-start, center);
        cursor: pointer;
        border-radius: 10px;
        padding: 0 10px 0 16px;

        &:hover {
          span {
            color: #fff;
          }

          background-color: #0a906c;
        }

        img {
          width: 26px;
          margin-right: 6px;

        }

        span {
          font-size: 16px;
          color: #b5bac8;
        }
      }
    }

    ul {
      margin-top: 40px;
      @include flex(column, flex-start, center);

      li {
        width: 160px;
        color: #0a906c;
        border: 1px solid #0a906c;
        padding: 0 10px;
        border-radius: 5px;
        font-size: 16px;
      }

      li+li {
        margin-top: 20px;
      }
    }
  }

  .right {
    flex: 1;
    height: 100%;
    width: 100%;
    border-radius: 15px;
    background-image: linear-gradient(#1c1e22, #1c1e22), linear-gradient(#fff, #fff);

  }
}
</style>
